<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>姓名案例_watch实现</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
            computed和watch之间的区别
			     1、computed能完成的功能，watch都可以完成。
				 2、watch能完成的功能，computed不一定能完成
				 例如:watch可以进行异步操作
		    两个重要的小原则:
			     1、所被Vue管理的函数，最好写成普通函数，这样this的指向才会指向vm或者组件实例对象
				 2、所有不被Vue管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例		 

		 -->
		<div id="root">
			姓:<input type="text" v-model="firstName" /><br />
			名:<input type="text" v-model=" lastName" />
			<br />
			全名:<span>{{fullName}}</span>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					firstName: '小',
					lastName: '莫',
					fullName: '小-莫'
				},
				watch: {
					firstName(val) {
						this.fullName = val + '-' + this.lastName
					},
					lastName(val) {
						this.fullName = this.firstName + '-' + val
					}
				}
			})
		</script>
	</body>
</html>
